<template>
  <div class="hearing">
    <v-header>
      <div slot="collect" @click="toggleCollect">
        <img :src="isFavorite? Favorited : Favorite" alt="">
      </div>
      <div slot="note" @click="shownote = true">添加笔记</div>
      <div slot="up" @click="submit" v-show="!showAnswer">提交</div>
    </v-header>

    <div class="listen-con" v-show="show">
      <p class="con-tit">{{index}}.听力对话</p>
      <p class="con-main">{{article}}</p>
      <div class="hearbox">
        <audio class="audio" :src="music" controls controlsList="nodownload"></audio>
      </div>
      <p class="txt" v-show="showAnswer">听力原文: {{original}}</p>
    </div>

    <div class="bar" v-show="show">
      <span>{{num}}/{{total}}</span>
      <img src="@/assets/line.png" alt="">
    </div>

    <div class="deep-main" v-show="show">
      <van-swipe :loop="false" :show-indicators="false" @change="onChange">
        <van-swipe-item v-for="(item,index) in question" :key="index" >
          <p class="item-tit">{{index+1}}. {{item.title}}</p>
          <div class="box-item" v-for="(opt,ind) in item.answer" :key="ind">
            <!-- 判断做题  还是 做题记录 -->
            <div class="item-left" v-if="!showAnswer" :class="{active:container[index] === ind}" @click="IsActive(opt.option,ind,index)">
              {{options[ind]}}
            </div>
            <div class="item-left disabeld" v-else :class="ind == hearAnswer[index] ? 'active': '' ">
              {{options[ind]}}
            </div>

            <div class="item-right">{{opt.option}}</div>
          </div>
          <p class="answer" v-show="showAnswer">答案: {{item.best}}</p>
          <div class="analyse" v-show="showAnswer">
            <div>答案解析:</div>
            <div class="detail">{{index+1}}. {{item.detail}}</div>
          </div>
        </van-swipe-item>
      </van-swipe>
    </div>

    <!-- 添加笔记 -->
    <van-dialog v-model="shownote" title="复习笔记" show-cancel-button confirm-button-text="保存" :beforeClose="noteBtn">
      <textarea v-model="message" placeholder="要记点什么吗"></textarea>
    </van-dialog>

  </div>
</template>

<script>
import header from '@/components/content/header'
import api from '@/api/hear'
import { Swipe, SwipeItem, Toast, Dialog } from 'vant'
import { mapGetters } from 'vuex'

export default {
  name: 'hearing',
  components: {
    "v-header":header,
    [Toast.name]: Toast,
    [Swipe.name]: Swipe,
    [SwipeItem.name]: SwipeItem,
    [Dialog.Component.name]: Dialog.Component,
  },
  data () {
    return {
      isFavorite:false,  // 是否已收藏
      Favorite:require('@/assets/collect.png'),
      Favorited:require('@/assets/collected.png'),
      music:require('@/assets/ceshi.mp3'),
      message:'',
      shownote:false,
      show:false,
      prevRoute:'',
      original:'',  // 听力原文
      article:'',  // 文章内容
      index:'',  // data 的索引
      question:[],  // 小题的数组
      total:'',  // 小题总数
      answer:[],  // 题目的选项
      num:'1',  // 第几小题  1/4
      options:['A','B','C','D','E','F','G','H','I','J','K','L'],  // 选项前的标签
      container:[], // 放每个小题选中的索引
      solution:[],  // 提交答案的数组 内容
      hear:{},  // 提交答案的对象 索引
    }
  },
  created () {
    this.getDeep()
  },
  computed: {
    ...mapGetters(['showAnswer','hearAnswer']),
  },
  beforeRouteEnter(to, from, next) {
    // console.log(from)
    next(vm => {
      vm.geturl(from.name)
    })
  },
  methods: {
    getDeep(){
      Toast.loading({message: '加载中...', forbidClick: true});
      api.Hear().then(res=>{
        Toast.clear()
        this.show = true
        console.log('听力题数据',res)
        let i = res.index
        this.index = i + 1  // data 的索引 +1
        // es6 结构赋值
        let {article,isFavorite,question,original} =res.data.list
        this.article = article  // 文章内容
        this.original = original   // 听力原文
        this.isFavorite = isFavorite    // 是否已收藏
        this.question = question    // 题目的选项
        this.total = question.length   //小题总长度
        // console.log(question,this.total)
      }).catch(error=>{
        console.log(error)
      })
    },

    // 头部 1/4 1的索引
    onChange(index){
      this.num = index + 1
    },

    // 小题的选中
    IsActive(detail,ind,index){
      this.$set(this.container,index,ind)  // set顺序必须和上面class:active一样  修改container，使得视图可以及时刷新。
      console.log('第'+`${index+1}`+'道题,选项是'+detail)
      // console.log(this.container)
    },

    // 收藏    没写返回数据给后台
    toggleCollect(){
      if( this.isFavorite ){
        this.isFavorite = false
        Toast('取消收藏')
      }else{
        this.isFavorite = true
        Toast('收藏成功')
      }
    },

    // 添加笔记
    noteBtn(action,done){
      if(action === 'cancel'){
        this.shownote = false
        done()
      }else if (action === 'confirm'){
        if(!this.message){
          Toast("请输入笔记,再保存")
          done(false)
        }else{
          console.log('听力题笔记:',this.message)
          this.shownote = false
          this.message = ''
          done()
        }
      }
    },

    // 提交
    submit(){
      Dialog.confirm({message: '是否提交试题?',}).then(() => {
        Toast.success('提交成功')
        this.question.forEach((item,index)=>{
          let a = this.container[index]
          if( a === undefined ){
            this.solution.push( null )
            this.hear[index] = null
          }else{
            this.solution.push( item.answer[a].option )
            this.hear[index] = a
          }
        })
        setTimeout(() => {
          console.log('听力题',this.solution)
          this.$store.dispatch("hearAnswer", this.hear)
          this.$router.push({path:'/home/reporthear'})
        }, 2000);
      })
      .catch(() => {
        // 取消
      });
    },

    geturl(url){
      this.prevRoute=url;
      // console.log(this.prevRoute)
      if(url == "listentype"){
        this.$store.dispatch("showAnswer", false)
      }
    }

  },
}
</script>

<style lang="less" scoped>
.hearing{
  position:absolute;
  width: 100%;
  height: 100%;
  top:0;
  left: 0;
  background-color: #f1f1f1;
}
.listen-con{
  margin: 5px 0;
  background: #fff;
  padding: 10px;
  height: 230px;
  overflow-y: auto;
  .con-tit{font-size: 16px;color: #333;line-height: 20px;}
  .con-main{font-size: 16px; color: #333; line-height: 24px;text-align: justify;
  margin-top: 5px;text-indent: 2em;overflow-y: auto;height: 72px;}
  .txt{font-size: 14px;line-height: 20px;color: #FF6400;text-align: justify;width: 335px;margin: 0 auto;}
}
.hearbox{
  width: 315px;
  margin: 15px auto;
  .audio{
    height: 46px;
    width: 100%;
  }
}
.bar{
  height: 36px;
  background: #fff;
  text-align: center;
  position: relative;
  margin-bottom: 5px;
  span{
    font-size: 14px;
    color: #656565;
    line-height: 36px;
    position: absolute;
    left: 10px;
    top: 0;
  }
  img{display: inline-block;width: 36px;line-height: 36px;}
}
.deep-main{
  padding: 5px 10px;
  background: #fff;
  height: calc(100% - 345px);
  box-sizing: border-box;
  overflow-y: auto;
}
.item-tit{font-size: 16px;color: #333;line-height: 24px;text-align: justify;margin-bottom: 10px;}
.box-item{
  margin-bottom: 15px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  .item-left{
    width: 32px;
    height: 32px;
    border: 1px solid #FF6400;
    border-radius: 16px;
    box-sizing: border-box;
    background: #fff;
    color: #FF6400;
    font-size: 16px;
    text-align: center;
    line-height: 30px;
  }
  .active{background: #ff6400;color: #fff;}
  .item-right{
    width: calc(100% - 40px);
    text-align: justify;
    font-size: 16px;
    color: #333;
    line-height: 22px;
  }
}
.answer{font-size: 16px;color: #333;}
.analyse{
  font-size: 16px;
  color: #333;
  margin-top: 10px;
  .detail{
    text-align: justify;
    line-height: 24px;
    margin: 10px 0 30px;
  }
}
.disabeld{pointer-events: none;}
textarea{
  font-size: 14px;
  width: 100%;
  white-space: pre-wrap;
  display: block;
  width: 100%;
  height: 100%;
  text-align: justify;
  box-sizing: border-box;
  border: 0;
  resize: none;
  line-height: 24px;
  padding: 10px 10px 10px 20px;
  color: #323232;
  height: 150px;
}
</style>
